import {inject, observer} from 'mobx-react';
import {Progress} from 'antd';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@inject('standardCustomReportStore')
@observer
export default class ExportInfo extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        try {
            let width = parseInt(jQuery('.custom-report-export-info').css('width'));
            var clientWidth = document.documentElement.clientWidth;
            if (width > 0 && clientWidth > 0 && clientWidth > width) {
                let left = (clientWidth - width) / 2;
                jQuery('.custom-report-export-info').css('left', `${left}px`);
            }
        } catch (e) {
        }
    }

    render() {
        const {standardCustomReportStore} = this.props;
        const {exportInfo = [], downloadExcel,cancelTask} = standardCustomReportStore;
        const exportingTask = exportInfo.filter((item = {}) => item.status == 0);
        return (
            <div className={'custom-report-export-info'}>
                <div className={'left-icon-div'}>
                    <div className={'icon-div-background'}>
                        <i className="icon-coms02-Derived"/>
                    </div>
                </div>
                <div className={'right-data-div'}>
                    <ul>
                        {exportingTask.length == 0 ?
                            <li>{`${getLabel(522256, '导出完成，请下载需要的文件')}`}</li>
                            :
                            <li>{`${exportingTask.length}${getLabel(522257, '个文件正在导出，请稍候')}`}</li>
                        }
                        {
                            exportInfo.map((item = {}) => {
                                const {name = '', fileid = '', exportpercent = 0, status = '', statuscol = '', id = '',filesize=0} = item;
                                return (
                                    <li className={'data-item'}>
                                        {status == 0 &&
                                        <div>
                                            <div style={{width:'90%', display:'inline-block'}}><Progress ecId={`${this && this.props && this.props.ecId || ''}_Progress@ls8nql@${status}`} percent={exportpercent}/></div>
                                            <span className={'file-cancel'}  onClick={() => {
                                                cancelTask(id);
                                            }}>{`${getLabel(201, '取消')}`}</span>
                                        </div>
                                        }
                                        {status == 1 &&
                                        <div className={`file-list-item`}>
                                            <span className={`file-name`} title={name}>{name}</span>
                                            <span className={'file-download'} onClick={() => {
                                                downloadExcel(`/weaver/weaver.file.FileDownload?fileid=${fileid}`, id);
                                            }}>{`${getLabel(258, '下载')}`} {'(' +this.getFileSize(filesize) + ')'}</span>
                                            <span className={'file-ignore'} onClick={() => {
                                                downloadExcel('', id);
                                            }}>{`${getLabel(522353, '忽略')}`}</span>
                                        </div>
                                        }
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }

    getFileSize(filesize){
        var size = parseInt(filesize);
        if(size<(1024*1024)){
           return  (size/1024).toFixed(2) + 'K';
        }else{
            return  (size/(1024*1024)).toFixed(2) + 'M';
        }
    }
}